切換路由方法

之前有提到切換路由的方法是使用 router-link 來切換，今天我們來介紹另一種不同的方式，這裡附上官方文件 API 參考，搭配官方文件的介紹可以更快速了解唷，那麼就直接來看下面的範例吧！

//src/components/Menu.vue

<template>
  <div>
    <router-link to="/page">Child1</router-link>
    <router-link to="/page/child2">Child2</router-link>
    <router-link to="/page/child3">Child3</router-link>
    <a href="#" @click.prevent="updatePath">切換到 Child2</a> //利用方法來切換路由
  </div>
</template>

<script>
export default {
  name: 'Menu',
  data () {
    return {
      
    }
  },
  methods: {
    updatePath() {
      this.$router.push('/page/child2')
    }
  }
}
</script>

上面的路由切換方式是使用 a 連結並建立方法來切換，注意，這裡的方法一定要加上 this 才有辦法正確使用router 的方法唷！
另外還可以利用 router 的 back() 的方法，來達到回到上一頁的效果，該怎麼做就來看看下面吧！

//src/components/Menu.vue

<template>
  <div>
    <router-link to="/page">Child1</router-link>
    <router-link to="/page/child2">Child2</router-link>
    <router-link to="/page/child3">Child3</router-link>
    <a href="#" @click.prevent="updatePath">切換到 Child2</a>
    <a href="#" @click.prevent="beforePath">回到前一頁</a>
  </div>
</template>

<script>
export default {
  name: 'Menu',
  data () {
    return {
      
    }
  },
  methods: {
    updatePath() {
      this.$router.push('/page/child2')
    },
    beforePath() {
      this.$router.back()
    }
  }
}
</script>

而回到前一頁還有另一種寫法：

beforePath() {
  this.$router.go(-1)
}

這樣子也可以唷！

methods: {
  updatePath() {
    this.$router.replace('/page/child2')
  },
  beforePath() {
    this.$router.go(-1)
  }
}

當我們使用 replace( ) 的方法的時候，是可以和 push( ) 一樣切換到指定頁面的，但是不同的地方是，用 push( ) 的話會在 history 裡添加一個紀錄，而replace( ) 則不會，所以如果我們點擊回到前一頁， 如果是用replace( ) 切換頁面的話，會回到上上一頁的路由唷！

那麼，明天再見囉！